<template>
  <view>
    <u-navbar title="招聘发布" height="50" title-size="36"></u-navbar>
    <u-gap height="20" bg-color="#F0F1F2"></u-gap>
    <u-steps
      class="steps"
      :list="numList"
      :current="current"
      mode="number"
      active-color="#10A28F"
    ></u-steps>
    <u-gap height="20" bg-color="#F0F1F2"></u-gap>
    <view class="form">
      <view v-if="current == 0">
        <view class="item">
          <view class="label">职位名称</view>
          <view class="value dis-flex flex-y-between flex-y-center">
            <input placeholder="请输入职位名称" v-model="form.nickname" />
          </view>
        </view>
        <view class="item">
          <view class="label">职位类型</view>
          <view
            @click="onPicker('selector', 'type')"
            class="value dis-flex flex-y-between flex-y-center"
          >
            <input placeholder="请选择职位类型" disabled v-model="form.gender" />
            <u-icon name="/static/more.png" size="28"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="label">工作城市</view>
          <view @click="onPicker('region')" class="value dis-flex flex-y-between flex-y-center">
            <input placeholder="请选择工作城市" disabled v-model="form.address" />
            <u-icon name="/static/more.png" size="28"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="label">薪资范围</view>
          <view
            @click="onPicker('selector', 'xinzi')"
            class="value dis-flex flex-y-between flex-y-center"
          >
            <input placeholder="请选择薪资范围" disabled v-model="form.address" />
            <u-icon name="/static/more.png" size="28"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="label dis-flex flex-y-between flex-y-center" @click="showPopup = true">
            <view>福利标签</view>
            <!-- <u-icon name="/static/more.png" size="28"></u-icon> -->
            <view class="add">＋</view>
          </view>
          <view class="value fuli-list dis-flex flex-y-center">
            <view class="fuli-item" v-for="(fuli, i) in form.fulis" :key="i">
              <text>{{ fuli.name }}</text>
              <view class="closeBtn" @click="closeFuli(i)">-</view>
            </view>
          </view>
        </view>
        <view class="fixed-wapper">
          <view @click="current = 1" class="submit-btn btn"> 下一步 </view>
        </view>
      </view>
      <view v-if="current == 1">
        <view class="item">
          <view class="label">学历要求</view>
          <view
            @click="onPicker('selector', 'edu')"
            class="value dis-flex flex-y-between flex-y-center"
          >
            <input placeholder="请选择学历要求" disabled v-model="form.gender" />
            <u-icon name="/static/more.png" size="28"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="label">工作经验</view>
          <view
            @click="onPicker('selector', 'jingy')"
            class="value dis-flex flex-y-between flex-y-center"
          >
            <input placeholder="请选择工作经验" disabled v-model="form.gender" />
            <u-icon name="/static/more.png" size="28"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="label">职位描述</view>
          <view class="value dis-flex flex-y-between flex-y-center" @click="showEditor('zw')">
            <input placeholder="请输入职位描述" v-model="form.zhiwei" />
            <u-icon name="/static/more.png" size="28"></u-icon>
          </view>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
        <view class="item dis-flex flex-y-center">
          <view class="label label-box">联系人</view>
          <view class="value">
            <input placeholder="请输入联系人" class="input" v-model="form.nickname" />
          </view>
        </view>
        <view class="item dis-flex flex-y-center">
          <view class="label label-box">联系方式</view>
          <view class="value">
            <input placeholder="请输入真实有效手机号" class="input" v-model="form.nickname" />
          </view>
        </view>
        <view class="item dis-flex flex-y-center flex-y-between">
          <view class="dis-flex flex-y-center">
            <view class="label label-box">验证码</view>
            <view class="value">
              <input placeholder="请输入验证码" class="input" v-model="form.nickname" />
            </view>
          </view>
          <view @click="getSmsCode" v-if="!getCode" class="code">获取验证码</view>
          <view v-else class="get-code">{{ daojishi }} s</view>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>

        <view class="charge-box">
          <view class="charge-tl">选择置顶信息，效果更好</view>
          <view class="list dis-flex">
            <view
              class="charge-item"
              :class="checkChargeIndex == d ? 'checked' : ''"
              @click="checkCharge(d)"
              v-for="(charge, d) in chargeList"
              :key="d"
            >
              <view class="count">{{
                charge.count > 0 ? '置顶' + charge.count + '天' : '不置顶'
              }}</view>
              <view class="amount">¥{{ charge.amount }}</view>
            </view>
          </view>
        </view>
        <view>
          <view class="fixed-wapper">
            <view class="floor-tip">
              <view @click="checked = !checked">
                <u-icon
                  :name="checked ? '/static/selected.png' : '/static/unselect.png'"
                  size="35"
                  style="margin-right: 10rpx; margin-top: 12rpx"
                ></u-icon>
              </view>
              <text>我已阅读并同意</text>
              <text style="color: #10a28f" @click="routeTo('')">《视频发布协议》</text>
            </view>
            <view @click="submit" class="submit-btn btn"> 确认发布 </view>
          </view>
        </view>
      </view>
      <view class="footer-fill"></view>
      <u-gap height="180" bg-color="#F0F1F2"></u-gap>
    </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      :params="params"
      :range-key="rangeKey"
    ></u-picker>
    <u-popup
      v-model="showPopup"
      mode="center"
      border-radius="14"
      width="710"
      height="320"
      duration="250"
      :closeable="true"
      close-icon-pos="top-right"
    >
      <view class="popup-box dis-flex flex-y-center flex-x-center">
        <input v-model="fulibox" class="input" disabled placeholder="请输入福利标签..." />
        <view class="bt" @click="addFuli">确定</view>
      </view>
    </u-popup>
    <Meditor
      :title="editorTitle"
      @submit="submitEditor"
      @closeEditor="closeEditor"
      :content="content"
      v-if="showEditorModel"
    ></Meditor>
  </view>
</template>

<script>
import Meditor from '@/users/components/editor/editor.vue'
export default {
  components: {
    Meditor
  },
  data() {
    return {
      show: false,
      showPopup: false,
      checkChargeIndex: 0,
      checked: true,
      current: 0,
      fulibox: '',
      numList: [
        {
          name: '基本信息'
        },
        {
          name: '具体要求'
        }
      ],
      typeList: [
        {
          type: '高中',
          value: '高中'
        },
        {
          type: '大专',
          value: '大专'
        },
        {
          type: '本科',
          value: '本科'
        },
        {
          type: '硕士研究生',
          value: '硕士研究生'
        },
        {
          type: '博士研究生',
          value: '博士研究生'
        }
      ],
      xinziList: [
        {
          type: '1000-3000',
          value: '1000-3000'
        }
      ],
      jingyList: [
        {
          type: '1年-3年',
          value: '1年-3年'
        },
        {
          type: '3年-5年',
          value: '3年-5年'
        },
        {
          type: '5年-8年',
          value: '5年-8年'
        }
      ],
      form: {
        fulis: [
          {
            name: '五险一金'
          },
          {
            name: '周末双休'
          },
          {
            name: '年终奖励'
          },
          {
            name: '哇哇'
          }
        ],
        zhiwei: ''
      },
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
        province: true,
        city: true,
        area: true,
        timestamp: true
      },
      rangeKey: '',
      range: [],
      mode: 'selector',
      eduList: [
        {
          edu: '高中',
          value: '高中'
        },
        {
          edu: '大专',
          value: '大专'
        },
        {
          edu: '本科',
          value: '本科'
        },
        {
          edu: '硕士研究生',
          value: '硕士研究生'
        },
        {
          edu: '博士研究生',
          value: '博士研究生'
        }
      ],
      getCode: false,
      timeOnline: null, //计时器
      daojishi: 10,
      chargeList: [
        {
          count: 1,
          amount: 10
        },
        {
          count: 3,
          amount: 27
        },
        {
          count: 7,
          amount: 56
        },
        {
          count: 15,
          amount: 105
        },
        {
          count: 30,
          amount: 200
        },
        {
          count: 0,
          amount: 0
        }
      ],
      showEditorModel: false,
      editorTitle: '',
      content: ''
    }
  },
  methods: {
    onPicker(e, f) {
      this.mode = e
      if (f == 'type') {
        this.rangeKey = 'type'
        this.range = this.typeList
      } else if (f == 'xinzi') {
        this.rangeKey = 'type'
        this.range = this.xinziList
      } else if (f == 'jingy') {
        this.rangeKey = 'type'
        this.range = this.jingyList
      } else if (f == 'edu') {
        this.rangeKey = 'edu'
        this.range = this.eduList
      }

      this.show = true
    },
    confirmSelctor(e) {
      console.log(e)
      if (this.mode == 'selector') {
        if (this.rangeKey == 'gender') {
          this.userInfo.gender = this.range[e].value
        }
      } else if (this.mode == 'time') {
        this.userInfo.birthday = e.year + '-' + e.month
      } else {
        this.userInfo.address = e.province.label + e.city.label + e.area.label
      }
    },
    addFuli() {
      this.form.fulis.push({
        name: this.fulibox
      })
      this.fulibox = ''
      this.showPopup = false
    },
    closeFuli(index) {
      this.form.fulis.splice(index)
    },
    getSmsCode() {
      const app = this
      uni.showToast({
        title: '获取验证码成功'
      })
      app.getCode = true
      app.timeOnline = setInterval(() => {
        app.daojishi--
        if (app.daojishi == 0) {
          app.timeOnline = null
          app.getCode = false
          app.daojishi = 60
        }
      }, 1000)
    },
    checkCharge(index) {
      this.checkChargeIndex = index
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    showEditor(type) {
      const app = this
      if (type == 'zw') {
        app.editorTitle = '职位描述'
        app.content = app.form.zhiwei
      }

      app.showEditorModel = true
    },
    closeEditor() {
      const app = this
      app.showEditorModel = false
    },
    submitEditor(res) {
      const app = this
      if (app.editorTitle == '职位描述') {
        app.form.zhiwei = res
      }
      app.showEditorModel = false
    },
    submit() {
      // this.$refs.uUpload.lists.forEach(val => {
      // 	this.form.coverUrl = val.response.data
      // })
      this.timeOnline = null
      this.daojishi = ''
      this.getCode = false

      if (!this.form.playUrl || this.form.playUrl == '') {
        this.$u.toast('请选择视频')
        return
      }

      // if(this.form.coverUrl == ""){
      // 	this.$u.toast("请选择封面")
      // 	return
      // }
      // if(this.form.detailAddress == ""){
      // 	this.$u.toast("请输入详细地址")
      // 	return
      // }

      // if(this.area == ""){
      // 	this.$u.toast("选择选择经营地址")
      // 	return
      // }
      this.form.spuId = this.goodsInfo.id
      this.$u.post('/app-api/vlog/info/create', this.form).then((res) => {
        this.$u.toast('成功')
        setTimeout(() => {
          try {
            uni.navigateBack()
          } catch (e) {
            // #ifdef MP-WEIXIN
            uni.switchTab({
              url: '/pages/video-home/video-home'
            })
            // #endif
          }
        }, 800)
      })
    }
  }
}
</script>

<style lang="scss">
@import url('@/style/btn.css');

page {
  // padding: 30rpx 0;
  background-color: #f0f1f2;
}
.code {
  font-size: 30rpx;
  color: #10a28f;
}
.has-code {
}
.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  width: 100%;
}
.add {
  color: #fff;
  width: 36rpx;
  height: 36rpx;
  background-color: #10a28f;
  border-radius: 50%;
  line-height: 30rpx;
  text-align: center;
}

.steps {
  background-color: #fff;
  padding: 30rpx 0;
}

.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;

  .input {
    border: 1rpx solid #999999;
    width: 50%;
    margin-right: 20rpx;
    padding: 10rpx 20rpx;
    // border-radius: 35rpx;
  }

  .bt {
    background-color: #10a28f;
    color: #fff;
    padding: 10rpx 40rpx;
    border-radius: 35rpx;
  }
}

.form {
  background-color: #fff;

  .item {
    padding: 30rpx 30rpx 24rpx 30rpx;
    border-bottom: 1rpx solid #dfe0e6;

    .label {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }
    .label-box {
      width: 160rpx;
    }

    .fuli-list {
      flex-wrap: wrap;
      width: 100%;
    }

    .value {
      input {
        font-size: 28rpx;
        color: #999999;
        margin-top: 20rpx;
      }
      .input {
        margin: 0;
        margin-left: 10rpx;
        font-size: 30rpx;
      }

      .fuli-item {
        height: 70rpx;
        background: #f5f5f5;
        border-radius: 10rpx;
        border: 1px solid #e6e6e6;
        font-size: 30rpx;
        color: #666666;
        margin-right: 50rpx;
        line-height: 70rpx;
        padding: 0 24rpx;
        width: auto;
        margin-top: 30rpx;
        position: relative;

        .closeBtn {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          line-height: 30rpx;
          background-color: #fa453c;
          color: #fff;
          border-radius: 50%;
          text-align: center;
          top: -15rpx;
          right: -15rpx;
        }
      }
    }
  }
}
.charge-box {
  background-color: #fff;
  padding: 30rpx 20rpx;
  .charge-tl {
    font-size: 30rpx;
    color: #ff6f10;
  }
  .list {
    flex-wrap: wrap;
    justify-content: space-between;
    .charge-item {
      margin-top: 30rpx;
      width: 30%;
      height: 150rpx;

      background: #f0f0f0;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-flow: column;
      padding: 26rpx 0;
      .count {
        font-size: 26rpx;
      }
      .amount {
        font-size: 36rpx;
        font-weight: 600;
      }
    }
    .checked {
      background: #e6f5f3;
      color: #10a28f;
    }
  }
}
.fixed-wapper {
  background-color: #f0f1f2;
  width: 100%;
  left: 0;
  padding-left: 4%;
  .submit-btn {
    width: 96%;
    // left: 4%;
  }
}
</style>
